 <ol class="breadcrumb">
	<li><a href="#">主界面</a></li>
	<li><a [routerLink]="['/bearing/list']">轴承</a></li>
	<li class="active">轴承列表</li>
</ol>
<div class="panel panel-default">
	<div class="panel-heading">轴承录入</div>
	<div class="panel-body">
		<form [formGroup]="bearingForm" *ngIf="active" (ngSubmit)="onSubmit()">
			<!-- base info -->
			<div class="form-title">
				<i class="fa fa-viadeo-square" aria-hidden="true"></i> 
				基本信息
			</div>
			<div class="row">
				<div class="col-xs-3">
					<input type="text" class="form-control" id="types" required minlength="4" placeholder="轴承类型" formControlName="types">
					<p *ngIf="formErrors.types" class="warn-mess">{{ formErrors.types }}</p>
				</div>
				<div class="col-xs-3">
					<input type="text" class="form-control" id="brand" required minlength="4" placeholder="轴承类型" formControlName="brand">
					<p *ngIf="formErrors.brand" class="warn-mess">{{ formErrors.brand }}</p>
				</div>
				<div class="col-xs-3">
					<input type="text" class="form-control" id="new_style" required placeholder="国内新型号" formControlName="new_style">
					<p *ngIf="formErrors.new_style" class="warn-mess">{{ formErrors.new_style }}</p>
				</div>
				<div class="col-xs-3">
					<input type="text" class="form-control" id="old_style" required placeholder="国内旧型号" formControlName="old_style">
					<p *ngIf="formErrors.old_style" class="warn-mess">{{ formErrors.old_style }}</p>
				</div>
			</div>
			<hr/>
			<!-- detail info -->
			<div class="form-title">
				<i class="fa fa-themeisle" aria-hidden="true"></i> 
				其他参数
			</div>
			<div class="row">
				<div class="col-xs-2">
					<input type="number" class="form-control" id="inside_diameter" required placeholder="内径（毫米）" formControlName="inside_diameter">
					<p *ngIf="formErrors.inside_diameter" class="warn-mess">{{ formErrors.inside_diameter }}</p>
				</div>
				<div class="col-xs-2">
					<input type="number" class="form-control" id="outside_diameter" required placeholder="外径（毫米）" formControlName="outside_diameter">
					<p *ngIf="formErrors.outside_diameter" class="warn-mess">{{ formErrors.outside_diameter }}</p>
				</div>
				<div class="col-xs-2">
					<input type="number" class="form-control" id="outside_diameter" required placeholder="厚度（毫米）" formControlName="outside_diameter">
					<p *ngIf="formErrors.outside_diameter" class="warn-mess">{{ formErrors.outside_diameter }}</p>
				</div>
				<div class="col-xs-2">
					<input type="number" class="form-control" id="purchase" required placeholder="买进的价格" formControlName="purchase">
					<p *ngIf="formErrors.purchase" class="warn-mess">{{ formErrors.purchase }}</p>
				</div>
				<div class="col-xs-2">
					<input type="number" class="form-control" id="unite" required placeholder="卖出的单价" formControlName="unit">
					<p *ngIf="formErrors.unit" class="warn-mess">{{ formErrors.unit }}</p>
				</div>
				<div class="col-xs-2">
					<input type="number" class="form-control" id="stock" placeholder="库存的数量" formControlName="stock">
				</div>
			</div>
			<hr/>
			<button type="submit"
					class="button button-small button-rounded button-primary"
					[disabled]="!bearingForm.valid">添加</button>
			<a [routerLink]="['/admin/bearing/list']"
				class="button button-small button-rounded button-caution">返回</a>
		</form>
	</div>
</div>